frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import Box from '@mui/material/Box';
3import {useTheme} from '@mui/material/styles';
4import {useTranslation} from 'react-i18next';
5import {getSession, useSession} from 'next-auth/react';
6import TravelColumns from '../../../containers/TravelColumns';
7import NewTravelDialog from '../../../containers/NewTravelDialog';
8import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
9import Fab from '../../../containers/Fab';
10import pageUtils from '../../../lib/pageUtils';
11import EventLayout, {TabComponent} from '../../../layouts/Event';
12import {
13 EventByUuidDocument,
14 FindUserVehiclesDocument,
15 useFindUserVehiclesQuery,
16} from '../../../generated/graphql';
17
18interface Props {
19 eventUUID: string;
20 announcement?: string;
21}
22
23const Page = (props: PropsWithChildren<Props>) => {
24 return <EventLayout {...props} Tab={TravelsTab} />;
25};
26
27const TravelsTab: TabComponent = () => {
28 const {t} = useTranslation();
29 const theme = useTheme();
30 const session = useSession();
31 const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
32 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
33
34 const isAuthenticated = session.status === 'authenticated';
35 const {data} = useFindUserVehiclesQuery({
36 skip: !isAuthenticated,
37 });
38 const vehicles = data?.me?.profile?.vehicles?.data || [];
39
40 const addTravelClickHandler =
41 isAuthenticated && vehicles?.length != 0
42 ? toggleVehicleChoice
43 : () => toggleNewTravel({opened: true});
44
45 return (
46 <Box>
47 <TravelColumns toggle={addTravelClickHandler} />
48 <Fab
49 onClick={addTravelClickHandler}
50 aria-label="add-car"
51 color="primary"
52 sx={{
53 bottom: 0,
54 right: theme.spacing(6),
55
56 [theme.breakpoints.down('md')]: {
57 right: theme.spacing(1),
58 bottom: 56,
59 },
60 }}
61 >
62 {t('travel.creation.title')}
63 </Fab>
64 <NewTravelDialog
65 context={openNewTravelContext}
66 toggle={() => toggleNewTravel({opened: false})}
67 />
68 <VehicleChoiceDialog
69 open={openVehicleChoice}
70 toggle={toggleVehicleChoice}
71 toggleNewTravel={toggleNewTravel}
72 vehicles={vehicles}
73 />
74 </Box>
75 );
76};
77
78export const getServerSideProps = pageUtils.getServerSideProps(
79 async (context, apolloClient) => {
80 const {uuid} = context.query;
81 const {host = ''} = context.req.headers;
82 const session = await getSession(context);
83 let event = null;
84
85 // Fetch event
86 try {
87 const {data} = await apolloClient.query({
88 query: EventByUuidDocument,
89 variables: {uuid},
90 });
91 event = data?.eventByUUID?.data;
92 } catch (error) {
93 return {
94 notFound: true,
95 };
96 }
97
98 // Fetch user vehicles
99 if (session)
100 await apolloClient.query({
101 query: FindUserVehiclesDocument,
102 });
103
104 return {
105 props: {
106 eventUUID: uuid,
107 metas: {
108 title: event?.attributes?.name || '',
109 url: `https://${host}${context.resolvedUrl}`,
110 },
111 },
112 };
113 }
114);
115
116export default Page;